<template>
  <div>
    <el-row>
        <el-form>
            <el-form-item label="部门">
               <el-select>
                 <!--lable 部门名称 value 部门id-->
                    <el-option v-for="dept in depts"
                               :label="dept.name" :value="dept.id">
                    </el-option>
               </el-select>
            </el-form-item>

        </el-form>
    </el-row>

    <el-table :data="list">
      <el-table-column
        label="姓名"
        prop="name"
      >
      </el-table-column>
      <el-table-column
        label="性别"
        prop="gender"
      >
   <!--     <template slot-scope="scope">
          &lt;!&ndash; {{scope.row.gender|toCheseGender}}&ndash;&gt;
           &lt;!&ndash; {{toChGander(scope.row.gender)}}&ndash;&gt;

        </template>-->
      </el-table-column>
      <el-table-column
        label="部门"
        prop="dept"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "table",
    data() {
      return {
        list: [],
        depts:[]

      }
    }, created() {
       var _this=this;
      this.axios({
        url: 'http://localhost:8080/java_web_day2_war_exploded/emp/list',
        method: 'get',
        dataType: 'json'
      }).then(function (res) {
          _this.list = res.data;
      })

    },methods:{
        toChGander(gender){
           if (gender=='male'){
              return '男';
           }else
           {
             return '女';
           }
        }
    }/*,computed:{
         toCheseGender(gender){


         }
    }*/
    ,filters:{
        toCheseGender(gender){
          if (gender=='male'){
            return '男';
          }else
          {
            return '女';
          }
        }
    }
  }
</script>

<style scoped>

</style>
